<template>
  <div class="m-sale">
    <!--form-->
    <el-form class='module-form' :inline="true" style="position:relative;" label-width='80px'>
      <el-form-item class='module-form-item' label="销售单号">
        <el-input v-model="searchFrom.aNo"></el-input>
      </el-form-item>
      <el-form-item class='module-form-item' label="销售日期">
        <el-date-picker
          v-model="dates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format='timestamp'
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item class='module-form-item' label="选择商品">
        <el-input v-model="aGoodsName" :disabled="true"></el-input>
        <el-button class="attr-btn" @click="showDialogSelect('goodsSelectList')">...
        </el-button>
      </el-form-item>
      <el-form-item class='module-form-item' label="销售单位">
        <el-input v-model="aIntentName" :disabled="true"></el-input>
        <el-button class="attr-btn" @click="showDialogSelect('supSelectList')">...
        </el-button>
      </el-form-item>
      <attr-search
        ref='attrSearch' aType='7'
      />
      <el-form-item class="m-sale-from-right-btn">
        <el-button @click="clearSearch">清空</el-button>
        <el-button @click="searchClick">搜索</el-button>
        <el-button type='primary' @click="jump">添加销售单</el-button>
      </el-form-item>
    </el-form>

    <!--表格-->
    <a-table :cols="cols" :data="data">
      <el-table-column align="center" label="操作" width='150' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.row.id)'>详情</el-button>
            <el-button size='mini' @click='deleteObj(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
    </a-table>

    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <!--属性选择列表-->
    <goods-select-list ref="goodsSelectList" @handelGoodsSelectList="handelGoodsSelectList"></goods-select-list>
    <sup-select-list ref="supSelectList" @handelSupSelectList="handelSupSelectList"></sup-select-list>
  </div>
</template>

<script>
  import {mapMutations} from 'vuex'
  import goodsSelectList from '../invent/components/goodsSelectList'
  import supSelectList from '../invent/components/supSelectList'
  import AttrSearch from '@/components/business/AttrSearch'
  export default {
    name: 'sale_list',
    components: {
      goodsSelectList,
      supSelectList,
      AttrSearch
    },
    data() {
      return {
        value1: '',
        cols: [
          {label: '销售单号', prop: 'no', minWidth: '150'},
          {label: '销售单位', prop: 'intent_name', minWidth: '230'},
          // {label: '项目名称', prop: 'project_name', minWidth: '150'},
          {label: '销售日期', prop: 'date', minWidth: '150', filter: window.$tools.filterTime},
          {label: '销售总额', prop: 'money', minWidth: '150', filter: window.$tools.filterPrice}
        ],
        data: [],
        ifRequesting: false,
        dialogSelect: false, // 属性选择是否打开
        selectType: '',  // 选择类型
        selectId: '1',
        supplyGetMySkus: '',
        crmGetIntents: '',
        attrSearch: false, // 进货形式

        // 表单
        searchFrom: {
          aNo: '',
          aBeginDate: '',
          aEndDate: '',
          aIntentId: '',
          aGoodsId: '',
          aAttrs: []
        },
        dates: '',
        aGoodsName: '',
        aIntentName: ''
      }
    },
    mounted() {
      this.$refs.page.changePage()
    },

    activated() {
      if (this.isFirst) {
        this.isFirst = false
        return false
      }
      this.$refs.page.changePage()
    },

    methods: {
      ...mapMutations(['setTabRoutes']),

      routerPush(type, args) {
        // push 到缓存里
        this.setTabRoutes({type: 'add', obj: {...this.getRouterInfoAccordingName(type), ...args}})
      },
      async fetchData(aPageNum, aPageSize) {
        const params = {
          aFirmId: this.aFirmId,
          aPageNum,
          aPageSize
        }
        const { aNo, aIntentId, aGoodsId } = this.searchFrom
        params.aAttrs = this.$refs.attrSearch.getData()
        if (this.dates) {
          this.searchFrom.aBeginDate = this.dates[0] / 1000
          this.searchFrom.aEndDate = this.dates[1] / 1000
        }
        if (aNo) params.aNo = aNo
        if (aIntentId) params.aIntentId = aIntentId
        if (aGoodsId) params.aGoodsId = aGoodsId
        return this.$api.inventGetSellingBills(params)
      },

      getData(data) {
        this.data = data
      },

      deleteObj(id) {
        if (this.ifRequesting) return false
        this.__messageBox({
          title: '你确认要删除该销售单？',
          successCallback: async () => {
            this.ifRequesting = true
            const {code} = await this.$api.inventDeleteSellingBill({aId: id})
            this.ifRequesting = false
            this.$refs.page.changePage()
            return code
          }
        })
      },

      // 显示选择属性列表
      showDialogSelect(type) {
        this.$refs[type].$show()
      },

      // 路由跳转
      jump() {
        this.routerPush('sale_create')
        this.$router.push({name: 'sale_create'})
      },

      searchFun() {
        this.$refs.page.changePage()
      },

      clearSearch() {
        this.searchFrom.aNo = ''
        this.searchFrom.aIntentId = ''
        this.searchFrom.aGoodsId = ''
        this.searchFrom.aAttrs = ''
        this.attrSearch = false
        this.dates = ''

        this.$refs.attrSearch.clear()
        this.$refs.goodsSelectList.clear()
        this.$refs.supSelectList.clear()
        this.aGoodsName = ''
        this.aIntentName = ''
        this.searchFun()
      },

      searchClick() {
        this.$refs.page.changePage()
      },

      choose(id) {
        const query = {id}
        this.routerPush('sale_detail', {query})
        this.$router.push({name: 'sale_detail', query})
      },

      handelGoodsSelectList(val) {
        this.searchFrom.aGoodsId = val.id
        this.aGoodsName = val.name
      },

      handelSupSelectList(val) {
        this.searchFrom.aIntentId = val.id
        this.aIntentName = val.name
      }
    }
  }
</script>
<style lang="less">
.m-sale {
  .module-form {
    display: flex;
    flex-wrap: wrap;
  }
  .module-form-item {
    width: 50%;
    margin-right: 0;
    display: flex;
    align-items: center;
    .el-form-item__content {
      flex: 1;
    }
    .el-input, .el-date-editor {
      width: 100%;
    }
  }
}
  .m-sale-from-left {
    width: 70%;
    float: left;
  }

  .m-sale-from-right {
    display: flex;
    align-items: center;
    height: 100%;
    .m-sale-from-right-btn {
      white-space: nowrap;
    }
  }

  .attr-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
</style>
